<template>
<div class="book-item">
    <div class="image-container">
        <img :src="book.img_url" alt="">
    </div>
    <div>
        <h3>{{ book.title }}</h3>
        <p>{{ book.author }}</p>
        <p>出版社：{{ book.publisher }}</p>
        <p>出版日期：{{ book.publish_date }}</p>
        <p>定价：<span class="book-price">&yen;{{ book.price }}</span></p>
        <p><button @click="deleteBookItem">删除</button></p>
    </div>
</div>
</template>

<script setup>

const props = defineProps({
    book: Object,
    index: Number
});

const emit = defineEmits([
    'delete-book-item'
])

function deleteBookItem() {
    emit('delete-book-item', props.index);
}
</script>

<style lang="scss">
$main-text-color: #333;
.book-item {
    display: flex;
    width: 500px;
    .image-container {
        width: calc(40% - 20px);
        padding: 10px;
        img {
            width: 100%;
        }
    }
    p {
        color: $main-text-color;
        margin-bottom: 10px;
    }
    
}
.book-price {
    color: red;
}
</style>